<form class="form-horizontal col-lg-offset-2" [formGroup]="accountForm">
    <div class="form-group alert alert-info input_length">
        <label class="col-lg-2 control-label" for="name">Name</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" [(ngModel)]="name" formControlName="name" placeholder="Please input name">
        </div>
    </div>
    <div class="form-group alert alert-info input_length">
        <label class="col-lg-2 control-label" for="email">Email</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" [(ngModel)]="email" formControlName="email" placeholder="Please input email">
        </div>
    </div>
    <div class="form-group alert alert-success input_length" [hidden]="type == 1 || type == 2">
        <label class="col-lg-2 control-label" for="profile">Profile</label>
        <div class="col-lg-4">
            <textarea class="form-control" [(ngModel)]="profile" formControlName="profile" placeholder="Please input profile" maxlength="200"></textarea>
        </div>
    </div>
    <div class="form-group alert alert-success input_length" [hidden]="type == 1 || type == 2">
        <label class="col-lg-2 control-label" for="facilities">Facilities</label>
        <div class="col-lg-4">
            <textarea class="form-control" [(ngModel)]="facilities" formControlName="facilities" placeholder="Please input facilities" maxlength="200"></textarea>
        </div>
    </div>
    <div class="form-group alert alert-success input_length" [hidden]="type == 1 || type == 2">
        <label class="col-lg-2 control-label" for="numOfYears">Number of years</label>
        <div class="col-lg-4">
            <div class="input-group">
                <input type="text" class="form-control" [(ngModel)]="numOfYears" formControlName="numOfYears" placeholder="Please input number of years">
                <span class="input-group-addon">years</span>
            </div>
        </div>
    </div>
    <div class="form-group alert alert-info input_length">
        <label class="col-lg-2 control-label" for="username">Username</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" [(ngModel)]="username" formControlName="username" placeholder="Please input username">
        </div>
    </div>
    <div class="form-group alert alert-info input_length">
        <label class="col-lg-2 control-label" for="password">Password</label>
        <div class="col-lg-4">
            <input type="password" class="form-control" formControlName="password" placeholder="Please input password">
        </div>
        <label class="col-lg-4 password_text" for="password_text">* no need enter if you don't change</label>
    </div>
    <div class="form-group alert alert-info input_length">
        <label class="col-lg-2 control-label" for="repassword">Re-Enter Password</label>
        <div class="col-lg-4">
            <input type="password" class="form-control" formControlName="repassword" placeholder="Please re-input password">
        </div>
    </div>
    <div class="form-group alert alert-info input_length">
        <div class="col-lg-1">
            <img id="captcha_img" class="captcha" alt="click to refresh" title="click to refresh" (click)="refresh()" src="/api/kaptcha" />
        </div>
        <div class="col-lg-4 col-lg-offset-1">
            <input type="text" class="form-control" [(ngModel)]="captcha" formControlName="captcha" placeholder="Please input captcha">
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-offset-2 col-lg-6">
            <button type="submit" [disabled]="!accountForm.valid" class="btn btn-success" (click)="onSubmit()">Update</button>
        </div>
    </div>
</form>